<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
 

<html>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
    <!--Load the Ajax API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>  
  
   <script type="text/javascript">
  // Load the Visualization API and the piechart package.
            google.load('visualization', '1', {'packages':['corechart']});

            // Set a callback to run when the Google Visualization API is loaded.
            google.setOnLoadCallback(dibujaGrafico);
            google.setOnLoadCallback(TypeGraph);
            google.setOnLoadCallback(IndGraph);
            google.setOnLoadCallback(Investigadores);
            google.setOnLoadCallback(UTGraph);
            google.setOnLoadCallback(ResUTGraph);
            google.setOnLoadCallback(ResIFC);
            var chart;
           
            
            function toImage(){
                dibujaGrafico();
            }
            function toImageType(){
                TypeGraph();
                if(document.getElementById('sort').onclick === true){
                    SortValues();
                }
            }
            
            function toImageIndicator(){
                IndGraph();
            }
            
            function toImageResearcher(){
                Investigadores();
            }
            
            function toImageUT(){
                UTGraph();
            }
            
            function toImageResUT(){
                ResUTGraph();
            }
            
            function toImageInvIFC(){
                ResIFC();
            }
            
            function dibujaGrafico() {

            // Create our data table out of JSON data loaded from server.
            
           inicio=$("#inicio").val();
           fin=$("#fin").val();
           divson=$("#divis").val();
           
           var i = parseInt(inicio);
           var f = parseInt(fin);
           
           
           var d = new Date();
           if(inicio.length===0 || fin.length===0){
                alert('Debe ingresar el inicio y fin del periodo a graficar');
            }
            if(i<1962 || f>d.getFullYear() || f<i)
                alert('Periodo no válido');
           
           
           var jsonData = $.ajax({
               
               url: 'cobertura.php?begin='+inicio+'&end='+fin+'&disv='+divson,
               //type: 'post',
               //contentType : 'application/json',
               dataType: 'json',         
               async: false
           }).responseText;
           
        
          //var arreglo = JSON.parse(jsonData);
         
           
          //var datos = google.visualization.arrayToDataTable(arreglo);
          
           var tabladatos = new google.visualization.DataTable(jsonData);
           
           
           if(divson==='total'){
                    var options = {
                    title: "Publicaciones",
                    backgroundColor:'#CEEBFC',
                    is3D: 'true',
                    width: 1800,
                    height: 600,
                    seriesType:"bars",
                    series:{1:{targetAxisIndex:1,type:"line"}},
                    
                    
                    vAxes:[
                        {title:'Publicaciones',textStyle:{color:'#2B73D8'}},
                        {title:'Pub/Inv',textStyle:{color:'#DC3912'},logScale:true}
                    ]
                    
                    };
                    
                    if(i===f){
                        var chart_div = document.getElementById('chart_div');
                         chart = new google.visualization.BarChart(chart_div);

                        if(document.getElementById('imagen').checked === true){
                            google.visualization.events.addListener(chart,'ready',function(){
                                chart_div.innerHTML='<img src="'+chart.getImageURI()+'">';
                                console.log(chart_div.innerHTML);
                            });
                        }
                        chart.draw(tabladatos, options);
                    }else{
                        var chart_div = document.getElementById('chart_div');
                         chart = new google.visualization.ComboChart(chart_div);
                        if(document.getElementById('imagen').checked === true){
                            google.visualization.events.addListener(chart,'ready',function(){
                                 chart_div.innerHTML='<img src="'+chart.getImageURI()+'">';
                                 console.log(chart_div.innerHTML);
                            });
                        }
                        chart.draw(tabladatos, options);

                    }
                    
                }else{
                    var options = {
                    title: 'Publicaciones',
                    backgroundColor:'#CEEBFC',
                    is3D: 'true',
                    width: 1800,
                    height: 600
                    };
                
            // Instantiate and draw our chart, passing in some options.
            // Do not forget to check your div ID
                    if(i===f){
                        var chart_div = document.getElementById('chart_div');
                         chart = new google.visualization.BarChart(chart_div);

                        if(document.getElementById('imagen').checked === true){
                            google.visualization.events.addListener(chart,'ready',function(){
                                chart_div.innerHTML='<img src="'+chart.getImageURI()+'">';
                                console.log(chart_div.innerHTML);
                            });
                        }
                        chart.draw(tabladatos, options);
                    }else{
                        var chart_div = document.getElementById('chart_div');
                         chart = new google.visualization.ColumnChart(chart_div);
                        if(document.getElementById('imagen').checked === true){
                            google.visualization.events.addListener(chart,'ready',function(){
                                 chart_div.innerHTML='<img src="'+chart.getImageURI()+'">';
                                 console.log(chart_div.innerHTML);
                            });
                        }
                        chart.draw(tabladatos, options);

                    }
                }
            google.visualization.events.addListener(chart, 'onmouseover', barMouseOver);
            google.visualization.events.addListener(chart, 'onmouseout', barMouseOut);
            
            
            
            }
            function barMouseOver(e) {
               chart.setSelection([e]);
            }
            
            function barMouseOut(e) {
                chart.setSelection([{'publicacion_year': "hola", 'publicaciones': 0}]);
            }
            
            function SortValues(){
                
                var sort='yes';
                tipo=$("#tipo").val();
                iniciotipo=$("#startype").val();
                fintipo=$("#endtype").val();
                var it =parseInt(iniciotipo);
                var ft = parseInt(fintipo);
                var dt = new Date();
                if(iniciotipo.length===0 || fintipo.length===0){
                    alert('Debe ingresar el inicio y fin del periodo a graficar');
                }
                if(it<1962 || ft>dt.getFullYear() || ft<it)
                    alert('Periodo no válido');
                
                //alert(tipo);
                var jsonDataTipo = $.ajax({
                
                url: 'tipo.php?tipo='+tipo+'&ini='+iniciotipo+'&finn='+fintipo+'&sort='+sort,
                dataType: 'json',
                async:false
            }).responseText;
            
            
            var tabladatostipo = new google.visualization.DataTable(jsonDataTipo);
            
            var optionstipo = {
                fontSize:9,
                animation:{
                    duration:1000,
                    easing:'in'
                },
                hAxis:{vieWindow:{min:0,max:61}},
                title: 'Publicaciones por '+tipo,
                //curveType:'function',
                backgroundColor:'#CEEBFC',
                is3D: 'true',
                width:1800,
                height:600
            };
            
            if(tipo==="investigador"){
                var charttype_div = document.getElementById('chart_div2');
                var charttype = new google.visualization.ColumnChart(charttype_div);
           
            
                if(document.getElementById('imagentipo').checked === true){
                    google.visualization.events.addListener(charttype,'ready',function(){
                    charttype_div.innerHTML='<img src="'+charttype.getImageURI()+'">';
                    console.log(charttype_div.innerHTML);
                });
                }
                charttype.draw(tabladatostipo, optionstipo);
              
              
              
              
          }
      }
       /*     if(tipo==="investigador"){
                var charttype = new google.visualization.ColumnChart(document.getElementById('chart_div2'));
                
                charttype.draw(tabladatostipo,optionstipo);
            }else
                var charttype = new google.visualization.PieChart(document.getElementById('chart_div2'));
                charttype.draw(tabladatostipo,optionstipo);
            }*/
            
            function TypeGraph(){
                
                var sort='no';
                tipo=$("#tipo").val();
                iniciotipo=$("#startype").val();
                fintipo=$("#endtype").val();
                var it =parseInt(iniciotipo);
                var ft = parseInt(fintipo);
                var dt = new Date();
                if(iniciotipo.length===0 || fintipo.length===0){
                    alert('Debe ingresar el inicio y fin del periodo a graficar');
                }
                if(it<1962 || ft>dt.getFullYear() || ft<it)
                    alert('Periodo no válido');
                
                //alert(tipo);
                var jsonDataTipo = $.ajax({
                
                url: 'tipo.php?tipo='+tipo+'&ini='+iniciotipo+'&finn='+fintipo+'&sort='+sort,
                dataType: 'json',
                async:false
            }).responseText;
            
            
            var tabladatostipo = new google.visualization.DataTable(jsonDataTipo);
            
            
            if(tipo==="investigador"){
                    var optionstipo = {               
                    fontSize:9,
                    annotations:{
                      boxStyle:{
                          stroke:'#888',
                          strokeWidth:1,
                          rx:10,
                          ry:10,
                          gradient:{
                              color1:'#fbf6a7',
                              color2:'#33b679',
                              x1:'0%',y1:'0%',
                              x2:'100%',y2:'100%',
                              useObjectBoundingBoxUnits:true
                          }
                      }  
                    },
                    title: 'Publicaciones por '+tipo,
                    //curveType:'function',
                    backgroundColor:'#CEEBFC',
                    is3D: 'true',
                    width:1800,
                    height:600 
                };


                    var charttype_div = document.getElementById('chart_div2');
                    var charttype = new google.visualization.ColumnChart(charttype_div);
                    if(document.getElementById('imagentipo').checked === true){
                        google.visualization.events.addListener(charttype,'ready',function(){
                            charttype_div.innerHTML='<img src="'+charttype.getImageURI()+'">';
                            console.log(charttype_div.innerHTML);
                        });
                    }
                    charttype.draw(tabladatostipo,optionstipo);
            }else{
                var optionstipo = {               
                       
                        annotations:{
                          boxStyle:{
                              stroke:'#888',
                              strokeWidth:1,
                              rx:10,
                              ry:10,
                              gradient:{
                                  color1:'#fbf6a7',
                                  color2:'#33b679',
                                  x1:'0%',y1:'0%',
                                  x2:'100%',y2:'100%',
                                  useObjectBoundingBoxUnits:true
                              }
                          }  
                        },
                        title: 'Publicaciones por '+tipo,
                        //curveType:'function',
                        backgroundColor:'#CEEBFC',
                        is3D: 'true',
                        width:1800,
                        height:600 
                    };
                var charttype_div = document.getElementById('chart_div2');
                var charttype = new google.visualization.PieChart(charttype_div);
                if(document.getElementById('imagentipo').checked === true){
                    google.visualization.events.addListener(charttype,'ready',function(){
                        charttype_div.innerHTML='<img src="'+charttype.getImageURI()+'">';
                        console.log(charttype_div.innerHTML);
                    });
                }
                charttype.draw(tabladatostipo,optionstipo);
            }
            }
            
            function IndGraph(){
                
                division=$("#divi").val();
                if (division==="ib"){
                    nd='Division de Investigación Básica';
                }else
                    nd='División de Neurociencias';
                indicadortipo=$("#tipoindicadores").val();
                indicador=$('#indicador').val();
               
                start=$("#start").val();
                end=$('#end').val();
                var s = parseInt(start);
                var e = parseInt(end);
                var t = new Date();
                
                if(start.length===0 || end.length===0){
                    alert("Debe indicar el rango de años a graficar");
                }
                if(s<1962 || e>t.getFullYear() || e<s){
                    alert('Ingresa un periodo válido');
                }
                
                
                
                var jsonDataImp = $.ajax({
                    url: 'indicador.php?pointertype='+indicadortipo+'&pointer='+indicador+'&start='+start+'&end='+end+'&divi='+division,
                    dataType: 'json',
                    async:false
                }).responseText;
                
                var tabladatosimpacto = new google.visualization.DataTable(jsonDataImp);
                
                if(indicadortipo!=="investigadori" && indicador!=="JCRSJR"){
                    
                    var optionsimp = {
                    
                    title:'Indicadores Promedio '+nd,
                    hAxis: {title:'Publicaciones', titleTextStyle:{color:'green'}},
                    backgroundColor:'#CEEBFC',
                    is3D: 'true',
                    width:1800,
                    height:600,
                    //bar: {groupWidth:"20%"}
                    pieHole: 0.4
                    };
                    var chartImpact_div = document.getElementById('chart_div3');
                    var chartImpact = new google.visualization.PieChart(chartImpact_div);
                    if(document.getElementById('imagenind').checked === true){
                        google.visualization.events.addListener(chartImpact,'ready',function(){
                        chartImpact_div.innerHTML='<img src="'+chartImpact.getImageURI()+'">';
                        console.log(chartImpact_div.innerHTML);
                        });
                    }
                    chartImpact.draw(tabladatosimpacto,optionsimp);
                    
                }else{
                
                
                var optionsimp = {
                    fontSize:9,
                    title:'Indicadores Promedio '+nd,
                    hAxis: {title:'Publicaciones', titleTextStyle:{color:'green'}},
                    backgroundColor:'#CEEBFC',
                    is3D: 'true',
                    width:1800,
                    height:600
                   
                    //bar: {groupWidth:"20%"}
                    
                };
                var chartImpact_div = document.getElementById('chart_div3');
                var chartImpact = new google.visualization.ColumnChart(chartImpact_div);
                if(document.getElementById('imagenind').checked === true){
                    google.visualization.events.addListener(chartImpact,'ready',function(){
                        chartImpact_div.innerHTML='<img src="'+chartImpact.getImageURI()+'">';
                        console.log(chartImpact_div.innerHTML);
                    });
                }
                chartImpact.draw(tabladatosimpacto,optionsimp);
            }
            }
            
            function indexes(invst){
                    
                    var jsonIndex = $.ajax({
                    url: 'hgindex.php?investigador='+invst,
                    dataType: 'json',
                    async:false
                }).responseText;
                
                return jsonIndex;
            }
            
            
            function Investigadores(){
                
                investigador=$("#researcher").val();
                quotes=$("#citas").val();
                startresea=$("#startresearcher").val();
                endresea=$('#endresearcher').val();
                var sr = parseInt(startresea);
                var er = parseInt(endresea);
                var tr = new Date();
                
                indexs=indexes(investigador);
                
                
                if(startresea.length===0 || endresea.length===0){
                    alert("Debe indicar el rango de años a graficar");
                }
                if(sr<1962 || er>tr.getFullYear() || er<sr){
                    alert('Ingresa un periodo válido');
                }
                
                
                
                var jsonDataResearcher = $.ajax({
                    url: 'investigadores.php?investigador='+investigador+'&ininv='+startresea+'&finv='+endresea+'&quotes='+quotes,
                    dataType: 'json',
                    async:false
                }).responseText;
                
               
                
                var tabladatosinvestigador = new google.visualization.DataTable(jsonDataResearcher);
                
                if(investigador==='Todos'){
                    var optionsresearcher = {
                    title: "Investigadores HIndex",
                    backgroundColor:'#CEEBFC',
                    width: 1800,
                    height: 600
                 
                    };
                }else{
                 
                if(quotes==='isi'){
                    var optionsresearcher = {
                    title: investigador+" "+indexs,
                    backgroundColor:'#CEEBFC',
                    colors:['#2B73D8','#FF7F00'],
                    is3D: 'true',
                    width: 1800,
                    height: 600,
                    series:{1:{targetAxisIndex:1}},
                    
                    
                    vAxes:[
                        {title:'Publicaciones',textStyle:{color:'#2B73D8'}},
                        {title:'ISI',textStyle:{color:'#FF7F00'},logScale:true}
                    ]
                    
                    };
                }else if(quotes==='scopus'){
                    var optionsresearcher = {
                    title: investigador+" "+indexs,
                    backgroundColor:'#CEEBFC',
                    colors:['#2B73D8','#2E9C45'],
                    is3D: 'true',
                    width: 1800,
                    height: 600,
                    series:{1:{targetAxisIndex:1}},
                    
                    
                    vAxes:[
                        {title:'Publicaciones',textStyle:{color:'#2B73D8'}},
                        {title:'SCOPUS',textStyle:{color:'#2E9C45'},logScale:true}
                    ]
                    };
                }else{
                    var optionsresearcher = {
                    title: investigador+" "+indexs,
                    backgroundColor:'#CEEBFC',
                    colors:['#2B73D8','#FF7F00','#2E9C45'],
                    is3D: 'true',
                    width: 1800,
                    height: 600,
                   series:{1:{targetAxisIndex:1},2:{targetAxisIndex:1}},
                    
                    
                    vAxes:[
                        {title:'Publicaciones',textStyle:{color:'#2B73D8'}},
                        {title:'ISI/SCOPUS',textStyle:{color:'#9910EE'},logScale:true}
                    ]
                    };
                }
            }
                
                function placeMarker(dataTable) {
                    var cli = this.getChartLayoutInterface();
                    var chartArea = cli.getChartAreaBoundingBox();
                    // "Zombies" is element #5.
                       
                        document.querySelector('.overlay-marker').style.top = "141px";//Math.floor(cli.getYLocation(dataTable.getValue(long, 1))) -340 + "px";
                       
                        document.querySelector('.overlay-marker').style.left = "1664px";//Math.floor(cli.getXLocation(long)) + 150 + "px";
                        
                    
                };
               
                
                var chartResearcher_div = document.getElementById('chart_div4'); 
                var chartResearcher = new google.visualization.ColumnChart(chartResearcher_div);
                if(document.getElementById('imageninvestigador').checked === true){
                    google.visualization.events.addListener(chartResearcher,'ready',function(){
                        chartResearcher_div.innerHTML='<img src="'+chartResearcher.getImageURI()+'">';
                        console.log(chartResearcher_div.innerHTML);
                    });
                }
                google.visualization.events.addListener(chartResearcher, 'ready',placeMarker.bind(chartResearcher, tabladatosinvestigador));
                chartResearcher.draw(tabladatosinvestigador,optionsresearcher);
            }
            
            function UTGraph(){
                
               
                startut=$("#startut").val();
                endut=$('#endut').val();
                var s = parseInt(startut);
                var e = parseInt(endut);
                var t = new Date();
                
                if(startut.length===0 || endut.length===0){
                    alert("Debe indicar el rango de años a graficar");
                }
                if(s<1962 || e>t.getFullYear() || e<s){
                    alert('Ingresa un periodo válido');
                }
                
                
                
                var jsonDataUT = $.ajax({
                    url: 'ut.php?&startut='+startut+'&endut='+endut,
                    dataType: 'json',
                    async:false
                }).responseText;
                
                var tabladatosut = new google.visualization.DataTable(jsonDataUT);
                
                
                var optionsut = {
                    fontSize:10,
                    title:'CITAS',
                    hAxis: {title:'Citas', titleTextStyle:{color:'green'}},
                    backgroundColor:'#CEEBFC',
                    is3D: 'true',
                    width:1800,
                    height:600,
                    vAxis:{logScale:true}
                   
                    //bar: {groupWidth:"20%"}
                    
                };
                var chartUT_div = document.getElementById('chart_div5');
                var chartUT = new google.visualization.ColumnChart(chartUT_div);
                if(document.getElementById('imagenut').checked === true){
                    google.visualization.events.addListener(chartUT,'ready',function(){
                        chartUT_div.innerHTML='<img src="'+chartUT.getImageURI()+'">';
                        console.log(chartUT_div.innerHTML);
                    });
                }
                chartUT.draw(tabladatosut,optionsut);
            }
            
            
            function ResUTGraph(){
                
                invesut=$("#researcherut").val();
                startresut=$("#startresut").val();
                endresut=$('#endresut').val();
                var sr = parseInt(startresut);
                var er = parseInt(endresut);
                var tr = new Date();
                
                if(startresut.length===0 || endresut.length===0){
                    alert("Debe indicar el rango de años a graficar");
                }
                if(sr<1962 || er>tr.getFullYear() || er<sr){
                    alert('Ingresa un periodo válido');
                }
                
                
                
                var jsonDataResearcherUT = $.ajax({
                    url: 'investigadoresut.php?investigador='+invesut+'&ininv='+startresut+'&finv='+endresut,
                    dataType: 'json',
                    async:false
                }).responseText;
                
                
                
                var tabladatosinvestigadorut = new google.visualization.DataTable(jsonDataResearcherUT);
                
                
                    var optionsresearcherut = {
                    title: invesut,
                    backgroundColor:'#CEEBFC',
                    width: 1800,
                    height: 600,
                    isStacked:true
                    };
               
               
                
                var chartResearcherUT_div = document.getElementById('chart_div6'); 
                var chartResearcherUT = new google.visualization.ColumnChart(chartResearcherUT_div);
                if(document.getElementById('imagenresut').checked === true){
                    google.visualization.events.addListener(chartResearcherUT,'ready',function(){
                        chartResearcherUT_div.innerHTML='<img src="'+chartResearcherUT.getImageURI()+'">';
                        console.log(chartResearcherUT_div.innerHTML);
                    });
                }
                chartResearcherUT.draw(tabladatosinvestigadorut,optionsresearcherut);
            }
            
           function ResIFC() {

            // Create our data table out of JSON data loaded from server.
            
           inicio=$("#inicioinvifc").val();
           fin=$("#fininvifc").val();
           
           
           
           var i = parseInt(inicio);
           var f = parseInt(fin);
           
           
           var d = new Date();
           if(inicio.length===0 || fin.length===0){
                alert('Debe ingresar el inicio y fin del periodo a graficar');
            }
            if(i<1975 || f>d.getFullYear() || f<i)
                alert('Periodo no válido');
           
           
           var jsonDataInvIFC = $.ajax({
               
               url: 'InvestIFC.php?begin='+inicio+'&end='+fin,
               //type: 'post',
               //contentType : 'application/json',
               dataType: 'json',         
               async: false
           }).responseText;
           
        
          
           var tabladatosInvIFC = new google.visualization.DataTable(jsonDataInvIFC);
           
            var optionsInvIFC = {
            title: 'Número de Investigadores',
            backgroundColor:'#CEEBFC',
            is3D: 'true',
            width: 1800,
            height: 600
            };
            // Instantiate and draw our chart, passing in some options.
            // Do not forget to check your div ID
            if(i===f){
                var chart_div7 = document.getElementById('chart_div7');
                 chart7 = new google.visualization.BarChart(chart_div7);
                
                if(document.getElementById('imageninvifc').checked === true){
                    google.visualization.events.addListener(chart7,'ready',function(){
                        chart_div7.innerHTML='<img src="'+chart7.getImageURI()+'">';
                        console.log(chart_div7.innerHTML);
                    });
                }
                chart7.draw(tabladatosInvIFC, optionsInvIFC);
            }else{
                var chart_div7 = document.getElementById('chart_div7');
                 chart7 = new google.visualization.ColumnChart(chart_div7);
                if(document.getElementById('imageninvifc').checked === true){
                    google.visualization.events.addListener(chart7,'ready',function(){
                         chart_div7.innerHTML='<img src="'+chart7.getImageURI()+'">';
                         console.log(chart_div7.innerHTML);
                    });
                }
                chart7.draw(tabladatosInvIFC, optionsInvIFC);
                
            }
            
            
            }
            
            
    
    
    </script>
    
    <head> 
   
        
        
        <style type="text/css">
            
            
            body {
                background-image: -webkit-linear-gradient(top right, #FFFFFF 0%, #E8E8E8 100%);
                //cursor:url(images/scopus.png),pointer;
            }
            #buttons{
                
                background-color: papayawhip;
                height: 50px;
            }
            
            .SelectStyle{
                
                width: 210px;
                height: 25px;
                position: relative;
            }
            
            .SelectStyle2{
                position:relative;
                width: 110px;
            }
            
            select {
                width: 100%;
                background: #F3F3F3;
                color: #585757;
                padding: 5px;
                font-size: 13px;
                line-height: 100%;
                border: 1px solid #C1C1C1;
                border-radius: 0;
                height: 24px;
                -webkit-appearance: none;
            }
            
            .InputStyle{
                width: 110px;
                position: relative;
            }
            
            .inputstyle2{
                width: 10%;
                background: #F3F3F3;
                color: #585757;
                padding: 5px;
                font-size: 13px;
                line-height: 100%;
                border: 1px solid #C1C1C1;
                border-radius: 0;
                height: 10px;
                -webkit-appearance: none;
            }
            
            .boton{
                font-size:10px;
                font-family:Verdana,Helvetica;
                font-weight:bold;
                color:white;
                background:#638cb5;
                border:0px;
                width:80px;
                height:19px;
            }
 
            option {
                padding: 10px;
            }
            
            .col{
                position: relative;
                clear: both;
                width: 960px;
                height: auto;
                margin: 20px 20px 0px 0px;
                    
            }
            .col3{ 
                    
                position: relative;
                clear: both;
                width: 1800px;
                height: auto;
                margin: 20px 20px 0px -400px;
               
            }
            
            #contenido {
               background-color: rgb(255,255,255);
               position:absolute;
               clear: both;
               width: 0px;
               height: auto;
               background: #FFF;
                
            }
            
            #wrapper {
                
                position:relative;
                width: 960px;
                margin: 0px auto;
            }
            
            #header {
                position: relative;
                clear :both;
                width: 960px;
                height: 140px;
                background: url(images/header.jpg)
                    no-repeat 0px 5px;
                
                
            }
            #ifc {
                
                position:absolute;
                clear:both;
                width: 140px;
                height: 110px;
                top:13px;
                left:25px;
                cursor: pointer;
                background: url(images/logo_ifc.png)
                    top left;
            }
            #escudo{
                position: absolute;
                width: 93px;
                height: 105px;
                top: 14px;
                right: 18px;
                cursor: pointer;
            }
            
            .bx-wrapper{
                position:relative;
                margin: 0 auto 0px;
                padding: 0;
            }
            
            
       .grafica1 {
            float:left;
             
                }
                
        .grafica2{
            float:left;
                }
        .grafica3{
            clear:both;
                }
            #dwl{
                position: absolute;
                top: 610px;
                right: 150px;
                font-size: 12px;
                color: #CCCC66;
                    
            }
            #dwl2{
                position: absolute;
                top: 630px;
                right: 150px;
                font-size: 12px;
                color: #CCCC66;
                    
            }
         /*   .item{
                position: relative;
                float: left;
                width: auto;
                margin: 0px 0px 0px 6px;
            }*/
            
            #footer{
                position: relative;
                clear: both;
                width: 920px;
                height: 335px;
                background: #444445 url(images/footerBG_3.png) repeat-x top left;
                padding: 20px;
            }
            
            #footer #unam{
                position: relative;
                float: right;
                width: 108px;
                height: 156px;
            }
            
            #footer #websites {
                position: relative;
                float: left;
                width: 50px;
                height: auto;
                margin: 0px;
            }
            
            #footer #websites .web{
                position: relative;
                width: 42px;
                height: 42px;
                margin: 0px 0px 10px 0px;
            }
            
            #footer #separador {
                position: relative;
                float: left;
                width: 1px;
                height: 340px;
                background: #919498;
                margin: 0px 20px 0px 20px;
            }
            
            #footer #items {
                position: relative;
                float: left;
            }
            
            #footer .item {
                
                position: relative;
                clear: left;
                font-family: 'FuturaStdBookRegular';
                font-weight: normal;
                font-size: 12px;
                text-transform: uppercase;
                color: #888;
                margin: 0px 0px 10px 0px;
            }
            #footer .item a{
                color: #888;
                text-decoration: none;
            }
            
            #footer .subitem{
                position: relative;
                float: left;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 11px;
                color: #BBB;
                margin: 0px 15px 10px 0px;
            }
            
            #footer .subitem a{
                color: #BBB;
                text-decoration: none;
            }
            
            
            
            .chartWithMarkerOverlay {
                position: relative;
                width: 700px;
            }
            .overlay-text {
                width: 200px;
                height: 200px;
                position: absolute;
                top: 30px;   /* chartArea top  */
                left: 200px; /* chartArea left */
            }
            .overlay-marker {
                width: 50px;
                height: 50px;
                position: absolute;
                top: 53px;   /* chartArea top */
                left: 528px; /* chartArea left */
            }
            
            .overlay-markersc {
                width: 50px;
                height: 50px;
                position: absolute;
                top: 173px;   /* chartArea top */
                left: 1665px; /* chartArea left */
            }
            
            
            
        
 
        </style>
         
    </head>
    
    
  <body>
      
        <div id="wrapper">
          <header  id="header">
              <div id="ifc">
                  <a href="http://www.ifc.unam.mx"></a>
              </div>
              <div id="escudo">
                  <a href="http://www.unam.mx">
                      <img src="images/escudo_head.png">
                  </a>
              </div>
          </header>
          <div id="contenido">
                <div class="col3">
                    <div class="bx-wrapper" style="max-width: 100%;">
                        <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 700px;">
                            <div id="grafica1"> 
                              
                                <div id="chart_div">
                                </div>
                                <div id="buttons">
                                    <div id='png'></div>
                                    Inicio Periodo<input name='inicio' id='inicio' value="1962" class="inputstyle2"></input> 
                                    Fin Periodo<input name='fin' id='fin' value="2015" class="inputstyle2"></input>
                                    Tipo<select name="divis" id="divis"  class="SelectStyle">
                                         <option value="total">Total</option>
                                         <option value="divann">Divisiones</option>
                                        
                                    </select>
                                    
                                   
                                  
                                            <input type="button" onclick="dibujaGrafico()" value="Graficar" class="boton" />
                                            Imagen PNG<input type="checkbox"  name="imagen" id="imagen" onclick="toImage()" />
                                            
                                                <div id="dwl">
                                                    <div class="item">
                                                        <a href="archivos/datos.txt" target="_blank">Download</a>
                                                    </div>
                                                </div>
                                </div>
                           
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col3">
                    <div class="bx-wrapper" style="max-width: 100%">
                        <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 700px;">
                            <div id="grafica2">
                                <input type="button" id="b1" value="Previous"/>
                                <input type="button" id="b2" value="Next"/>
                                <input type="button" id="b3" value="Zoom"/>
                                <div id="chart_div2">
                                    
                                </div>
                                <div id="buttons">
                                    Tipo<select name="tipo" id="tipo" class="SelectStyle2">
                                            <option value="division">División</option>
                                            <option value="departamento">Departamento</option>
                                            <option value="investigador">Investigador</option>
                                        </select>
                                    <br>
                                    De<input name="startype" id="startype" class="inputstyle2" value="1962"/>
                                    a <input name="endtype" id="endtype" class="inputstyle2" value="2015"/>
                                    <input type="button" onclick="TypeGraph()" value="Graficar" class="boton" />
                                    <input type="submit" onclick="SortValues()" value="Ordenar" class="boton" id="sort"/>
                                    Imagen PNG<input type="checkbox"  name="imagentipo" id="imagentipo" onclick="toImageType()"/>
                                        <div id="dwl">
                                                    <div class="item">
                                                        <a href="archivos/datostipo.txt" target="_blank">Download</a>
                                                    </div>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
              <div class="col3">
                    <div class="bx-wrapper" style="max-width: 100%">
                        <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 700px;">
                            <div id="grafica4">
                               
                                <div id="chart_div4"></div>
                                 
                            <!--     <div class="overlay-markersc">
                                     <img src="images/scopus.png" height="20">
                                </div> -->
                                <div id="buttons">
                                           <?php
                                                $server     = '192.168.1.10'; //servidor
                                                $username   = 'srojas'; //usuario de la base de datos
                                                $password   = 'anemona'; //password del usuario de la base de datos
                                                $database   = 'ifcweb_investigadores'; //nombre de la base de datos

                                                $conexion = @new mysqli($server, $username, $password, $database);

                                                if ($conexion->connect_error) //verificamos si hubo un error al conectar, recuerden que pusimos el @ para evitarlo
                                                {
                                                    die('Error de conexión: ' . $conexion->connect_error); //si hay un error termina la aplicación y mostramos el error
                                                }

                                                $sql="select p.nombre as investigador from ifcweb_investigadores.perfiles as p order by investigador asc;";
                                                $result = $conexion->query($sql); //usamos la conexion para dar un resultado a la variable

                                                if ($result->num_rows > 0) //si la variable tiene al menos 1 fila entonces seguimos con el codigo
                                                {
                                                    $combobit="";
                                                    while ($row = $result->fetch_array(MYSQLI_ASSOC)) 
                                                    {
                                                        $combobit .=" <option value='".  utf8_encode($row['investigador'])."'>".  utf8_encode($row['investigador'])."</option>"; //concatenamos el los options para luego ser insertado en el HTML
                                                    }
                                                }
                                                else
                                                {
                                                    echo "No hubo resultados";
                                                }
                                                $conexion->close(); //cerramos la conexión
                                            ?>
                                    Investigador<select name="researcher" id="researcher" class="SelectStyle">
                                                    <?php echo $combobit; ?>
                                                    <option value='Todos'>Todos</option>>
                                                </select>
                                    Citas<select name="citas" id="citas" class="SelectStyle2">
                                        <option value="isi">isi</option>
                                        <option value="scopus">scopus</option>
                                        <option value="isiscopus">isi & scopus</option>
                                    </select>
                                    <br>
                                    De<input name="starresearcher" id="startresearcher" class="inputstyle2" value="1962"/>
                                    a <input name="endresearcher" id="endresearcher" class="inputstyle2" value="2015"/>
                                    <input type="button" onclick="Investigadores()" value="Graficar" class="boton" />
                                    Imagen PNG<input type="checkbox"  name="imageninvestigador" id="imageninvestigador" onclick="toImageResearcher()"/>
                                        <div id="dwl">
                                                    <div class="item">
                                                        <a href="archivos/datosinv.txt" target="_blank">Download</a>
                                                    </div>
                                        </div>
                                </div>
                                <div class="overlay-marker">
                                     <script>
                                         citas=$("#citas").val();
                                         if(citas==='isi'){
                                             document.write("<img src=\"images/isi.png\" height=\"20\">");
                                         }else if(citas==='scopus'){
                                             document.write("<img src=\"images/scopus.png\" height=\"20\">");
                                         }
                                     </script>
                                    
                                </div>
                               
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col3">
                    <div class="bx-wrapper" style="max-width: 100%">
                        <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 700px">
                            <div id="grafica3">
                                <div id="chart_div3"></div>     
                                <div id="buttons">
                                    División<select name="divi" id="divi" class="SelectStyle">
                                        <option value="ib">Investigación Básica</option>
                                        <option value="nc">Neurociencias</option>
                                    </select>
                                    Tipo<select name="tipoindicadores" id="tipoindicadores" class="SelectStyle2">
                                            <option value="departamentoi">Departamento</option>
                                            <option value="investigadori">Investigador</option>
                                        </select>
                                        
                                    Impacto<select name="indicador" id="indicador" class="SelectStyle2">
                                                <option value="JCR">JCR</option>
                                                <option value="SJR">SJR</option>
                                                <option value="JCRSJR">JCR/SJR</option>
                                            </select>
                                        
                                    De<input name="start" id="start" value="1962" class="inputstyle2"/>
                                    a<input name="end" id="end" value="2015" class="inputstyle2"/>
                                    <input type="button" onclick="IndGraph()" value="Graficar" class="boton"/>
                                    Imagen PNG<input type="checkbox"  name="imagenind" id="imagenind" onclick="toImageIndicator()"/>
                                    <div id="dwl">
                                                <div class="item">
                                                    <a href="archivos/datosind.txt" target="_blank">Download</a>
                                                </div>
                                    </div>
      
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col3">
                    <div class="bx-wrapper" style="max-width: 100%">
                        <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 700px">
                            <div id="grafica5">
                                <div id="chart_div5"></div>     
                                <div id="buttons">                           
                                    Deh<input name="startut" id="startut" value="1962" class="inputstyle2"/>
                                    a<input name="endut" id="endut" value="2015" class="inputstyle2"/>
                                    <input type="button" onclick="UTGraph()" value="Graficar" class="boton"/>
                                    Imagen PNG<input type="checkbox"  name="imagenut" id="imagenut" onclick="toImageUT()"/>
                                    <div id="dwl">
                                                <div class="item">
                                                    <a href="archivos/datosut.txt" target="_blank">Download</a>
                                                </div>
                                    </div>
      
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
              <div class="col3">
                    <div class="bx-wrapper" style="max-width: 100%">
                        <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 700px">
                            <div id="grafica5">
                                <div id="chart_div6"></div>     
                                <div id="buttons">
                                    <?php
                                                $server     = '192.168.1.10'; //servidor
                                                $username   = 'srojas'; //usuario de la base de datos
                                                $password   = 'anemona'; //password del usuario de la base de datos
                                                $database   = 'ifcweb_investigadores'; //nombre de la base de datos

                                                $conexion = @new mysqli($server, $username, $password, $database);

                                                if ($conexion->connect_error) //verificamos si hubo un error al conectar, recuerden que pusimos el @ para evitarlo
                                                {
                                                    die('Error de conexión: ' . $conexion->connect_error); //si hay un error termina la aplicación y mostramos el error
                                                }

                                                $sql="select p.nombre as investigador from ifcweb_investigadores.perfiles as p order by investigador asc;";
                                                $result = $conexion->query($sql); //usamos la conexion para dar un resultado a la variable

                                                if ($result->num_rows > 0) //si la variable tiene al menos 1 fila entonces seguimos con el codigo
                                                {
                                                    $combobit="";
                                                    while ($row = $result->fetch_array(MYSQLI_ASSOC)) 
                                                    {
                                                        $combobit .=" <option value='".  utf8_encode($row['investigador'])."'>".  utf8_encode($row['investigador'])."</option>"; //concatenamos el los options para luego ser insertado en el HTML
                                                    }
                                                }
                                                else
                                                {
                                                    echo "No hubo resultados";
                                                }
                                                $conexion->close(); //cerramos la conexión
                                            ?>
                                    Investigador<select name="researcherut" id="researcherut" class="SelectStyle">
                                                    <?php echo $combobit; ?>
                                                </select>
                                    De<input name="startresut" id="startresut" value="1962" class="inputstyle2"/>
                                    a<input name="endresut" id="endresut" value="2015" class="inputstyle2"/>
                                    <input type="button" onclick="ResUTGraph()" value="Graficar" class="boton"/>
                                    Imagen PNG<input type="checkbox"  name="imagenresut" id="imagenresut" onclick="toImageResUT()"/>
                                    <div id="dwl">
                                                <div class="item">
                                                    <a href="archivos/datosinvut.txt" target="_blank">Download</a>
                                                    <a href="archivos/datospapers.txt" target="_blank">Articulos</a>
                                                </div>
                                    </div>
      
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
              <div class="col3">
                    <div class="bx-wrapper" style="max-width: 100%;">
                        <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 700px;">
                            <div id="grafica7"> 
                              
                                <div id="chart_div7">
                                </div>
                                <div id="buttons">
                                    <div id='png'></div>
                                    Inicio Periodo<input name='inicioinvifc' id='inicioinvifc' value="1975" class="inputstyle2"></input> 
                                    Fin Periodo<input name='fininvifc' id='fininvifc' value="2015" class="inputstyle2"></input>
                         
                                            <input type="button" onclick="ResIFC()" value="Graficar" class="boton" />
                                            Imagen PNG<input type="checkbox"  name="imageninvifc" id="imageninvifc" onclick="toImageInvIFC()" />
                                            
                                                <div id="dwl">
                                                    <div class="item">
                                                        <a href="archivos/datosInvIFC.txt" target="_blank">Download</a>
                                                    </div>
                                                </div>
                                </div>
                           
                            </div>
                        </div>
                    </div>
                </div>
              <footer id="footer">
                  <div id="unam">
                      <a href="http://www.unam.mx">
                          <img src="images/unam2.png" alt="UNAM">
                      </a>
                  </div>
                  <div id="websites">
                      <div class="web">
                          <a href="http://www.facebook.com/ifcunam">
                              <img src="images/facebook.png" width="42" height="42" alt="Facebook">
                          </a>
                      </div>
                      <div class="web">
                          <a href="https://www.twitter.com/IFC_UNAM">
                              <img src="images/twitter.png" width="42" height="42" alt="Twitter">
                          </a>
                      </div>
                  </div>
                  <div id="separador"></div>
                  <div id="items">
                      <div class="item">
                            <a href="http://www.ifc.unam.mx/investigacion/basica/bioquimica-biologia-estructural">INVESTIGACIÓN BÁSICA</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="http://www.ifc.unam.mx/investigacion/neurociencias/cognitiva">NEUROCIENCIAS</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="http://www.ifc.unam.mx/produccion-academica">PRODUCCIÓN ACADÉMICA</a>
                      </div>
                      <br>
                      <div class="item">
                          <a href="http://www.ifc.unam.mx/acerca-del-instituto">ACERCA DEL INSTITUTO</a>
                      </div>
                      <div class="subitem">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.ifc.unam.mx/acerca-del-instituto/organizacion">Organización</a>
                      </div>
                      <div class="subitem">
                          <a href="http://www.ifc.unam.mx/acerca-del-instituto/informes">Informes</a>
                      </div>
                      <div class="subitem">
                          <a href="http://www.ifc.unam.mx/acerca-del-instituto/investigadores-emeritos">Eméritos</a>
                      </div>
                      <div class="subitem">
                          <a href="http://www.ifc.unam.mx/acerca-del-instituto/personal-del-instituto">Personal</a>
                      </div>
                      <div class="subitem">
                          <a href="http://www.ifc.unam.mx/acerca-del-instituto/colegio">Colegio del Personal Académico</a>
                      </div>
                      <div class="subitem">
                          <a href="http://www.ifc.unam.mx/transparencia">Transparencia</a>
                      </div>
                      <br>
                      
                      <div class="item">
                          <a href="http://www.ifc.unam.mx/otros-servicios/informacion-bibliografica">Información Bibliográfica</a>
                      </div>
                      <div class="subitem">
                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          <a href="http://biblioteca.ibt.unam.mx/revistas.php">Revistas en línea (UNAM)</a>
                      </div>
                      <div class="subitem">
                          <a href="http://isiknowledge.com/">Web of Knowledge</a>
                      </div>
                      <div class="subitem">
                          <a href="http://www.scopus.com/home.url">Scopus</a>
                      </div>
                      <div class="subitem">
                          <a href="http://www.ncbi.nlm.nih.gov/pubmed/">PubMed</a>
                      </div>
                      <div class="subitem">
                          <a href="http://www.ifc.unam.mx/otros-servicios/">Otras Bases de Datos</a>
                      </div>
                      <br>
                      <div class="item">
                          <a href="http://www.ifc.unam.mx/ligas-de-interes">Ligas de Interés</a>
                      </div>
                      <div class="subitem">
                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          <a href="http://www.unam.mx">UNAM.mx</a>
                      </div>
                      <div class="subitem">
                          <a href="http://www.amc.mx">Academia Mexicana de Ciencias</a>
                      </div>
                      <div class="subitem">
                          <a href="http://www.ifc.unam.mx/ligas-de-interes/sociedades">Sociedades Científicas</a>
                      </div>
                      <div class="subitem">
                          <a href="http://www.cic-ctic.unam.mx">Coord. de la Inv. Científica</a>
                      </div>
                      <div class="subitem">
                          <a href="http://www.dgcs.unam.mx/mujer.html">Igualdad de Género en la UNAM</a>
                      </div>
                      <br>
                      <br>
                      <br>
                  </div>
              </footer>
          </div>
        </div>
      <!----><br>
       
    
      
  </body>
</html>